<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能表单</title>
</head>
<body>
    <!-- 
        input标签
        1.type属性：
            text普通文本 
            password密码框 
            submit提交按钮 
            reset重置按钮 
            button普通按钮
            radio单选按钮    name需要一致，才可以互斥
            checkbox复选按钮 name需要一致，才可以收集一组值；checked属性，代表当前项默认被选中
            file文件上传     multiple属性支持上传多个文件

            date日期控件
            datetime-local日期与时间控件
            search搜索框
            number数字框
            range范围        max最大值 min最小值 step步长 value默认值
            image以图片作为提交按钮  src设置图片位置
            email邮箱格式校验
            url地址格式校验
            color颜色选择器

        2.name属性：form表单收集元素时，必填的
        3.id属性、class属性：方便进行CSS样式、JS脚本上操作
        4.value属性：默认值
        5.placeholder属性：输入框中的提示词
        6.checked属性：代表当前复选框默认被选中

        7.autofocus属性：自动获得焦点
        8.multiple属性：支持多个
        9.maxlength属性：限制文本框中文字个数
        10.autocomplete属性：是否允许文本框中有提示，设置off关闭提示
        11.readonly属性：只读   disablede属性：禁用  hiddene属性：隐藏
        12.requirede属性：必填项
        13.patterne属性：正则校验
    -->
    <!-- 
        select option 下拉菜单
        1.multiple属性：复数
        2.value属性：默认值
        3.selected属性：当前项被选中
    -->
    <!-- 
        textarea 文本域
        1.cols属性：宽度
        2.rows属性：高度
    -->
    <form action="">
        <input type="text" name="t1" maxlength="10" autocomplete="off" required  pattern="^[0-9]*$"><br>
        <input type="text" name="t2" readonly value="111"><br>
        <input type="text" name="t3" disabled value="222" hidden><br>
        表单元素<br>
        <input type="radio" name="gender" value="boy">男
        <input type="radio" name="gender" value="girl">女
        <br>
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="音乐" checked>音乐
        <input type="checkbox" name="hobby" value="编程">编程
        <br>
        <input type="file">
        <br>
        <input type="file" multiple>
        <br>
        <input type="search" placeholder="请搜索...">
        <br>
        <input type="number" placeholder="请输入数字...">
        <input type="hidden" placeholder="隐藏输入框">
        <br>
        <input type="range" max="10" min="0" step="2" value="4">
        <br>

        提交按钮
        <input type="image" src="./img/btn.png">
        <br>


        邮箱&地址<br>
        <input type="email" name="email" id=""><br>
        <input type="url" name="url" id=""><br>
        
        颜色选择器<br>
        <input type="color" name="color" id=""><br>

        时间：<br>
        <input type="date" name="date" id=""><br>
        <input type="week" name="week" id=""><br>
        <input type="month" name="month" id=""><br>
        <input type="datetime-local" name="datetime" id=""><br>


        评价<br>
        <textarea name="content" cols="10" rows="10"></textarea><br>
        <select name="addr1">
            <option value="合肥">安徽合肥</option>
            <option value="无锡">江苏无锡</option>
            <option value="成都" selected>四川成都</option>
        </select><br>
        <select name="addr2" multiple>
            <option value="合肥">安徽合肥</option>
            <option value="无锡">江苏无锡</option>
            <option value="成都">四川成都</option>
        </select><br>

        <br>
        <input type="submit" value="提交数据">
    </form>
</body>
</html>